<template>
    <view style="height: 100%">
        <!-- pages/my/my.wxml -->

        <view class="userinfo">
            <view class="userinfo-avatar">
                <open-data type="userAvatarUrl"></open-data>
            </view>
            <open-data type="userNickName" class="name"></open-data>
        </view>
        <view class="choose">
            <view class="choose-item" @tap="handleMyblog">我的贴子</view>
            <view class="choose-item">我的收藏</view>
            <view class="choose-item">浏览记录</view>
            <view class="choose-item">更多</view>
        </view>
        <view class="about">
            <view class="aboutUs" @tap="handleAboutUs">关于我们</view>
            <view class="responsibility">免责声明</view>
        </view>
    </view>
</template>

<script>
// pages/my/my.js
export default {
    data() {
        return {};
    },
    methods: {
        handleAboutUs(e) {
            uni.navigateTo({
                // url: '/pages/sign/sign',
                url: '/pages/aboutUs/aboutUs'
            });
        },

        handleMyblog(e) {
            uni.navigateTo({
                // url: '/pages/sign/sign',
                url: '/pages/Myblog/Myblog'
            });
        }
    }
};
</script>
<style>
/* pages/my/my.wxss */
.userinfo {
    position: relative;
    width: 750rpx;
    height: 320rpx;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.userinfo-avatar {
    overflow: hidden;
    display: block;
    width: 160rpx;
    height: 160rpx;
    margin: 20rpx;
    margin-top: 50rpx;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}

.userinfo {
    /* color: #fff; */
    font-size: 14px;
    background-color: #fff;
    border-radius: 40%;
}
.name {
    color: #3d3b3b4f;
    font-weight: bold;
}
.choose {
    margin-top: 100rpx;
}

.choose-item {
    margin-right: 30rpx;
    border-radius: 20rpx;
    margin-left: 30rpx;
    margin-top: 20rpx;
    border: 3rpx solid #c0c0c0;
    padding: 10rpx 10rpx 10rpx 15rpx;
    /* font-family:Papyrus,Fantasy; */
}
.about {
    text-align: center;
    font-size: small;
    margin-top: 220rpx;
}
</style>
